{% extends "base.html" %}

{% block title %}数据分析 - 作文智能评阅系统{% endblock %}

{% block header %}数据分析{% endblock %}

{% block styles %}
<style>
    .analysis-container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 2rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        text-align: center;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: bold;
        color: var(--primary-color);
        margin: 0.5rem 0;
    }

    .stat-label {
        color: #666;
        font-size: 0.9rem;
    }

    .chart-container {
        background: white;
        padding: 2rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        margin-bottom: 2rem;
    }

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .chart-title {
        color: var(--secondary-color);
        margin: 0;
    }

    .chart-filters {
        display: flex;
        gap: 1rem;
    }

    .chart-select {
        padding: 0.5rem;
        border: 1px solid #e1e8ed;
        border-radius: var(--border-radius);
    }

    canvas {
        width: 100% !important;
        height: 300px !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="analysis-container">
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">127</div>
            <div class="stat-label">本月评阅总数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">85.6</div>
            <div class="stat-label">平均分数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">92</div>
            <div class="stat-label">最高分数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">15</div>
            <div class="stat-label">优秀作文数量</div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-header">
            <h3 class="chart-title">分数分布趋势</h3>
            <div class="chart-filters">
                <select class="chart-select">
                    <option value="week">最近一周</option>
                    <option value="month">最近一月</option>
                    <option value="year">最近一年</option>
                </select>
            </div>
        </div>
        <canvas id="scoreChart"></canvas>
    </div>

    <div class="chart-container">
        <div class="chart-header">
            <h3 class="chart-title">评分维度分析</h3>
        </div>
        <canvas id="dimensionChart"></canvas>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='js/analysis.js') }}"></script>
{% endblock %} 